<ion-header [translucent]="true">
  <ion-toolbar color="warning">
    <ion-title>
      Student Register
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">

  <form [formGroup]="studentForm" (ngSubmit)="CreateRecord()">

    <ion-item>
      <ion-label position="floating">Name</ion-label>
      <ion-input formControlName="Name"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Age</ion-label>
      <ion-input formControlName="Age"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Address</ion-label>
      <ion-input formControlName="Address"></ion-input>
    </ion-item>

    <ion-item>
      <ion-button (click)="CreateRecord()" [disabled]="studentForm.invalid">
        <ion-icon size="small" slot="icon-only" name="add"></ion-icon>
        &nbsp;Create Record
      </ion-button>
    </ion-item>

  </form>


  <ion-card *ngFor="let item of studentList" color="primary">
    <span *ngIf="!item.isEdit; else elseBlock">
      <ion-card-header>
        <ion-card-title>{{item.Name}} of {{item.Age}} years</ion-card-title>
        <ion-card-subtitle>From: {{item.Address}}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>

        <ion-button shape="round" color="secondary" size="small" (click)="EditRecord(item)">
          <ion-icon size="small" slot="icon-only" name="create"></ion-icon>

        </ion-button>
        <ion-button shape="round" color="danger" size="small" (click)="RemoveRecord(item.id)">
          <ion-icon size="small" slot="icon-only" name="trash"></ion-icon>

        </ion-button>
      </ion-card-content>
    </span>
    <ng-template #elseBlock>
      <ion-card-header>
        <ion-card-title>
          <ion-grid>
            <ion-row>
              <ion-col>
                Edit
              </ion-col>
              <ion-col>
                <ion-button fill="solid" color="medium" size="small" (click)="item.isEdit = false">
                  Cancel
                </ion-button>
              </ion-col>
              <ion-col>
                <ion-button fill="solid" color="success" size="small" (click)="UpdateRecord(item)">
                  Update
                </ion-button>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-label><strong>Name</strong></ion-label>
          <ion-input type="text" [(ngModel)]="item.EditName"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label><strong>Age</strong></ion-label>
          <ion-input type="text" [(ngModel)]="item.EditAge"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label><strong>Address</strong></ion-label>
          <ion-input type="text" [(ngModel)]="item.EditAddress"></ion-input>
        </ion-item>
      </ion-card-content>
    </ng-template>
  </ion-card>

</ion-content>